<template>
<div class="typeProducts">
  <div class="search">
    <Input v-model="value" placeholder="请输入你要查询的内容" style="width: 300px" />
    <Button type="primary" icon="ios-search" @click="query">查询</Button>
    <Button type="warning" @click="flag = true">添加产品类型</Button>
  </div>

  <div class="typeInfo">
    <Table height="420" border :columns="typeTitle" :data="types">

      <template slot-scope="{ row}" slot="action">
        <Button type="primary" size="small" style="margin-right: 10px" @click="sendData(row)">修改</Button>

        <Button type="error" size="small" @click="modal3 = true">删除</Button>
        <Modal v-model=" modal3" title="确实要删除?" @on-ok="deteleData(row)">
          <p style="text-align:center;font-size:18px;color:red;font-famliy:'楷体';letter-space:3px;">删除后无法恢复!!!</p>
        </Modal>
      </template>
    </Table>
  </div>

  <div>
    <Modal title="添加产品类型" v-model="flag" class-name="vertical-center-modal" draggable width="400" footer-hide algin="center">
      <div class="addType">
        <div class="menusItem">
          <span>产品类型名称:</span>
          <Input v-model="pt_name" placeholder="输入产品名称" clearable style="width: 300px" autofocus />
        </div>
        <div class="menusItem">
          <span>图标名称:</span>
          <Input v-model="pt_icon" placeholder="thumb-circle-o" clearable style="width: 300px" />
          <a  class="tip" target="_blank" href="https://youzan.github.io/vant-weapp/#/icon">图标库地址，点这里找icon。</a>
        </div>
        <div class="menusItem">
          <span>图片路径:</span>
          <Input v-model="pt_url" placeholder="http://www.kirrito.top/pic/nav-img/n1.webp" clearable style="width: 300px" />
        </div>
        <div class="menusItem">
          <span>类型排序:</span>
          <Input v-model="pt_sort" placeholder="0-9999" clearable style="width:300px" />
        </div>
        <Button type="info" @click="addProductType" style="width:300px">保存</Button>
      </div>
    </Modal>
  </div>

  <div class="updateType">
    <Modal title="修改产品类型" v-model="updataFlag" class-name="vertical-center-modal" draggable width="1000" @on-ok="ok" @on-cancel="cancel">
      <Table height="420" border :columns="rowsTitle" :data="rows" style="height:200px">
        <template slot-scope="{ row }" slot="pt_Id">
          <span>{{ row.pt_Id }}</span>
        </template>
        <template slot-scope="{ row }" slot="pt_name">
          <Input type="text" v-model="ptName" v-if="inputFlag" autofocus />
          <span v-else>{{ row.pt_name }}</span>
        </template>
        <template slot-scope="{ row }" slot="pt_icon">
          <Input type="text" v-model="ptIcon" v-if="inputFlag" clearable />
          <span v-else>{{ row.pt_icon }}</span>
        </template>
        <template slot-scope="{ row }" slot="pt_url">
          <Input type="text" v-model="ptUrl" v-if="inputFlag" clearable />
          <span v-else>{{ row.pt_url }}</span>
        </template>
        <template slot-scope="{ row }" slot="pt_sort">
          <Input type="text" v-model="ptSort" v-if="inputFlag" />
          <span v-else>{{ row.pt_sort }}</span>
        </template>
        <template slot-scope="{ row}" slot="action">
          <div v-if="inputFlag">
            <Button @click="UpdateProductType(row)">保存</Button>
          </div>
          <div v-else>
            <Button @click="showInput(row)">操作</Button>
          </div>
        </template>
      </Table>
    </Modal>
  </div>

</div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  data: () => ({
    value: '',
    flag: false,
    updataFlag: false,
    modal3: false,
    inputFlag: false,
    types: [],
    rows: [],
    rowsTitle: [{
        title: 'ID',
        key: 'pt_Id',
        slot: 'pt_Id',
        width: 80,
        align: 'center',
      },
      {
        title: '类型名称',
        key: 'pt_name',
        slot: 'pt_name',
        width: 120,
        align: 'center',
      },
      {
        title: '产品类型图标',
        key: 'pt_icon',
        slot: 'pt_icon',
        width: 400,
        align: 'center',
      },
      {
        title: '产品类型图片',
        key: 'pt_url',
        slot: 'pt_url',
        align: 'center',
        ellipsis: true,
      },
      {
        title: '排序',
        key: 'pt_sort',
        slot: 'pt_sort',
        width: 100,
        align: 'center',
      },
      {
        title: '操作',
        slot: 'action',
        width: 100,
        align: 'center',
      },
    ],
    typeTitle: [{
        title: 'ID',
        key: 'pt_Id',
        width: 80,
        align: 'center',
      },
      {
        title: '类型名称',
        key: 'pt_name',
        width: 120,
        align: 'center',
      },
      {
        title: '产品类型图标',
        key: 'pt_icon',
        width: 400,
        align: 'center',
      },
      {
        title: '产品类型图片',
        key: 'pt_url',
        align: 'center',
      },
      {
        title: '类型排序',
        key: 'pt_sort',
        width: 100,
        align: 'center',
      },
      {
        title: '操作',
        slot: 'action',
        width: 180,
        align: 'center',
      },
    ],
    ptName: '',
    ptIcon: '',
    ptUrl: '',
    ptSort: '',
    pt_name: '',
    pt_icon: '',
    pt_url: '',
    pt_sort: '',
  }),
  created() {
    this.GetProductType()
  },
  methods: {
    query() {
      this.types = this.types.filter((el, index) => {
        return el.pt_name.indexOf(this.value) != -1
      })
    },
    sendData(row) {
      this.updataFlag = true
      this.rows.push(JSON.parse(JSON.stringify(row)))
    },
    showInput(row) {
      this.ptName = row.pt_name
      this.ptIcon = row.pt_icon
      this.ptUrl = row.pt_url
      this.ptSort = row.pt_sort
      this.inputFlag = !this.inputFlag
    },
    async UpdateProductType(row) {
      try {
        row.pt_name = this.ptName
        row.pt_icon = this.ptIcon
        row.pt_url = this.ptUrl
        row.pt_sort = this.ptSort
        let params = new URLSearchParams()
        params.append('id', row.pt_Id)
        params.append('name', row.pt_name)
        params.append('icon', row.pt_icon)
        params.append('url', row.pt_url)
        params.append('sort', row.pt_sort)
        params.append('status', row.pt_status)

        if(this.inspectKey(params)) return
        await this.$http.post(conf.UpdateProductType, params)
        this.GetProductType()
        this.inputFlag = !this.inputFlag
      } catch (error) {
        console.log(error)
      }
    },
    ok() {
      this.rows = []
      this.inputFlag = false
    },
    cancel() {
      this.rows = []
      this.inputFlag = false
    },
    async deteleData(row) {
      try {
        console.log(row)
        row.pt_status = 0
        let params = new URLSearchParams()
        params.append('id', row.pt_Id)
        params.append('name', row.pt_name)
        params.append('icon', row.pt_icon)
        params.append('url', row.pt_url)
        params.append('sort', row.pt_sort)
        params.append('status', 0)
        await this.$http.post(conf.UpdateProductType, params)
        this.GetProductType()
        this.modal3 = false
      } catch (error) {
        console.log(error)
      }
    },
    async GetProductType() {
      const {
        data: {
          data
        },
      } = await this.$http.get(conf.GetProductType)
      this.types = data
    },
    //添加产品类型
    async addProductType() {
      try {
        let param = new URLSearchParams()
        param.append('name', this.pt_name)
        param.append('icon', this.pt_icon)
        param.append('url', this.pt_url)
        param.append('sort', this.pt_sort)

        if(this.inspectKey(params)) return
        await this.$http.post(conf.addProductType, param)
        this.flag = false
        this.GetProductType()
      } catch (err) {
        console.log('保存失败', err.message)
      }
    },
    inspectKey(obj){
      let errKey='',flag=false
      for (const key in obj) {
          if (Object.hasOwnProperty.call(obj, key)) {
              if(!obj[key]) {
                  flag=true
                  errKey=key
              }
          }
      }
      this.$Message.info('不填字段不能为空')
      return flag
    },
  },
}
</script>

<style lang="less" scoped>
.typeProducts {
  .search {
    margin: 20px;

    button {
      margin-left: 30px;
    }
  }

  .typeInfo {
    padding: 20px;
  }
}

.addType {
  padding: 20px 50px;

  .menusItem {
    margin-bottom: 20px;

    span,
    label {
      font-size: 17px;
      vertical-align: middle;
      margin-bottom: 10px;
      font-family: '宋体';
      font-weight: 600;
    }

    #menu {
      width: 200px;
      height: 32px;
      line-height: 1.5;
      padding: 4px 7px;
      font-size: 14px;
      border: 1px solid #dcdee2;
      border-radius: 4px;
      color: #515a6e;
      background-color: #fff;
    }
  }
}

.updateType {
  height: 300px;
}
.tip{
    font-size: 12px;
}
</style>
